<!--
 * @Descripttion: 图文详情
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 14:23:23
-->
<template>
  <div>
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="imgTextForm"
        :rules="imgTextFormRules"
        ref="imgTextForm"
        label-width="140px"
      >
        <el-form-item :label="tips[1]" prop="introduction">
          <lb-ueditor
            v-model="imgTextForm.introduction"
            :destroy="true"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item label="图文详情" prop="content">
          <lb-ueditor
            v-model="imgTextForm.content"
            :destroy="true"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('imgTextForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: { 1: `${this.$t('menu.Website')}首页简介` },
      navTitle: '',
      imgTextForm: {
        introduction: '',
        content: '',
        modular_id: ''
      },
      imgTextFormRules: {
        introduction: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' },
        content: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' }
      }
    }
  },
  created () {
    let { id, title } = this.$route.query
    this.imgTextForm.modular_id = id
    this.navTitle = title
    this.getFormInfo()
  },
  components: {
  },
  methods: {
    getFormInfo () {
      this.$api.getWebsiteContentList({ id: this.imgTextForm.modular_id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.flag = res.data.data.length !== 0
          if (res.data.data.length) {
            this.imgTextForm = res.data.data[0]
          }
        }
      })
    },
    /**
       * @method 提交表单信息
       */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { imgTextForm } = this
          if (this.flag) {
            this.$api.editWebsiteContentInfo(imgTextForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addWebsiteContentInfo(imgTextForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.go(-1)
    }
  },
  watch: {
    'imgTextForm.content' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs['imgTextForm'].clearValidate('content')
      }
    },
    'imgTextForm.introduction' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs['imgTextForm'].clearValidate('introduction')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
